<template>
  <div class="uploadList">
    <el-table :data="tableList" stripe border class="user-table"  style="width: 100%;">
      <el-table-column fixed type="index" label="*" sortable width="40"></el-table-column>
      <el-table-column prop="fileName" label="名称" sortable min-width="100"></el-table-column>
      <el-table-column prop="creatorName" label="上传人" sortable width="100"></el-table-column>
      <el-table-column prop="createTime" label="上传时间" sortable width="160"></el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>
          <el-button @click="viewFile(scope.row)" type="text" size="small" v-if="scope.row.isPdf"><span class="cl-warning">预览</span></el-button>
          <el-button @click="deleteFile(scope.row)" v-if="(isShowBtn|| isShowBtn==undefined || isShowBtn==null)"  type="text" size="small"><span class="cl-danger">删除</span></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="预览" :visible.sync="dialog.isShow" v-dialogDrag :close-on-click-modal="false" :append-to-body='true' >
      <div>
        <el-input v-model.number="dialog.pdfOption.drawingPage" type="number" style="width: 150px;" min="1" :max="dialog.pdfOption.drawingNumPages"></el-input>
          <span>/{{dialog.pdfOption.drawingNumPages}}</span>
          <el-button @click="dialog.pdfOption.drawingRotate += 90">&#x27F3;</el-button>
          <div>
            <pdf ref="drawingPdf"
              style="width:100%"
              :src="dialog.pdfOption.drawingSrc"
              :page="dialog.pdfOption.drawingPage"
              :rotate="dialog.pdfOption.drawingRotate"
              @progress="dialog.pdfOption.drawingLoadedRatio = $event"
              @num-pages="dialog.pdfOption.drawingNumPages = $event"
              @link-clicked="dialog.pdfOption.drawingPage = $event">
            </pdf>
          </div>
          
      </div>  
    </el-dialog > 
  </div>
</template>
<script>
import baseApi from 'plugins/axios/baseApi.js';
import pdf from 'vue-pdf';
export default {
  name: 'uploadList',
  components:{
    pdf
  },
  props:{
    upLoadType:{
      type:[String, Number],
    },
    drawNo:{
      type:String
    },
    processId:{/**编程程序上传 */
      type:[String,Number]
    },
    taskTotalId:{
      type:[Number,String]
    },
    isShowBtn:{
    },
  },
  data (){
    return {
      tableList:[],
      dialog:{
        isShow:false,
        pdfOption:{
           //PDF
          drawingLoadedRatio: 0,
          drawingPage: 1,
          drawingNumPages: 0,
          drawingRotate: 0,
          drawingSrc:''
        }
      }
    }
  },
  watch:{
    
  },
  created(){

  },
  methods:{
    getTableList(){
      let self = this;
      let postData={};
       /**获取 编程程序文件上传 的列表*/ 
      if(self.processId){
        postData ={ type:self.upLoadType,drawNo:self.drawNo,processId:self.processId}
        baseApi.programUploadList(postData).then(res=>{
          if(res.content.length>0){
            res.content.forEach(item=>{
              let fileNameArray = item.path.split('\\');
              item.fileName =fileNameArray[fileNameArray.length-1];
            })
          }
           self.tableList = res.content;
        })
      }else{
         /**获取 1-图纸上传、2-工艺上传、3-图形文件上传 的列表*/ 
        postData ={ type:self.upLoadType,drawNo:self.drawNo}
        baseApi.drawInfoList(postData).then(res=>{
          if(res.content.length>0){
            res.content.forEach(item=>{
              let fileNameArray = item.path.split('\\');
              let RegExpObject = /\.pdf$/i
              item.fileName =fileNameArray[fileNameArray.length-1];
              
              item.isPdf = RegExpObject.test(item.fileName );
            })
          }
          console.log( res.content);
          self.tableList = res.content;
        })
      } 
    },
    download(row){
       window.location.href= baseApi.mergenDownload({id:row.id});
    },
    /**删除文件*/ 
    deleteFile(row){
      let self = this;
      self.$confirm('是否删除该文件？','提示',{
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(()=>{
        baseApi.deleteBigFileUpload(row.id).then(res=>{
          self.$message.success('删除成功');
          self.getTableList()
        })
      }).catch(()=>{})
    },
    /**预览pdf 文件 */
    viewFile(row){
      let self = this;
      self.dialog.isShow =true;
      self.dialog.pdfOption.drawingSrc =  baseApi.viewBigFile(row.id);
    } 
  }
}
</script>
<style lang="stylus" scoped>
.uploadList
  width 100%
</style>
